<template>
  <div>
    <el-card shadow="always">
      <el-tabs v-model="activeName" stretch>
        <el-tab-pane label="时段监控" name="1">
          <!--<el-button @click="show">Click Me</el-button>-->
          <el-card shadow="always">
            <div class="wrapper" ref="wrapperBox">
              <div class="content">
                <el-row>
                  <el-col :span="span">
                    <el-row style="margin-bottom: 11px">
                      <el-col class="col" :span="span">播放增量</el-col>
                      <el-col class="col" :span="span">点赞增量</el-col>
                      <el-col class="col" :span="span">退款率</el-col>
                      <el-col class="col" :span="span">预估消耗</el-col>
                      <el-col class="col" :span="span">净佣金ROI</el-col>
                      <el-col class="col" :span="span">评论增量</el-col>
                    </el-row>
                    <el-row>
                      <el-col class="col" :span="span">{{this.playNum}}</el-col>
                      <el-col class="col" :span="span">{{this.diggNum}}</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">{{this.commNum}}</el-col>
                    </el-row>
                  </el-col>

                  <el-col :span="span">
                    <el-row style="margin-bottom: 11px">
                      <el-col class="col" :span="span">点赞总量</el-col>
                      <el-col class="col" :span="span">有效销售额</el-col>
                      <el-col class="col" :span="span">已付款佣金</el-col>
                      <el-col class="col" :span="span">有效单数</el-col>
                      <el-col class="col" :span="span">退款销售额</el-col>
                      <el-col class="col" :span="span">已结算佣金</el-col>
                    </el-row>
                    <el-row>
                      <el-col class="col" :span="span">{{this.diggTotal}}</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                    </el-row>
                  </el-col>

                  <el-col :span="span">
                    <el-row style="margin-bottom: 11px">
                      <el-col class="col" :span="span">已付款单数</el-col>
                      <el-col class="col" :span="span">全部佣金</el-col>
                      <el-col class="col" :span="span">退款佣金</el-col>
                      <el-col class="col" :span="span">已结算单数</el-col>
                      <el-col class="col" :span="span">销售额ROI</el-col>
                      <el-col class="col" :span="span">预估净利润</el-col>
                    </el-row>
                    <el-row>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                    </el-row>
                  </el-col>

                  <el-col :span="span">
                    <el-row style="margin-bottom: 11px">
                      <el-col class="col" :span="span">预估亏盈</el-col>
                      <el-col class="col" :span="span">佣金ROI</el-col>
                      <el-col class="col" :span="span">有效单笔价</el-col>
                      <el-col class="col" :span="span">播放出单</el-col>
                      <el-col class="col" :span="span">播放总量</el-col>
                      <el-col class="col" :span="span">评论总量</el-col>
                    </el-row>
                    <el-row>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">{{this.playTotal}}</el-col>
                      <el-col class="col" :span="span">{{this.commTotal}}</el-col>
                    </el-row>
                  </el-col>

                  <el-col :span="span">
                    <el-row style="margin-bottom: 11px">
                      <el-col class="col" :span="span">全部销售额</el-col>
                      <el-col class="col" :span="span">全部单数</el-col>
                      <el-col class="col" :span="span">有效佣金</el-col>
                      <el-col class="col" :span="span">退款单数</el-col>
                      <el-col class="col" :span="span">播放佣金</el-col>
                    </el-row>
                    <el-row>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                      <el-col class="col" :span="span">0</el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-card>
          <el-card shadow="always" style="margin: 5px 0 5px 0">
            <div style="float: left">
              <el-form :model="queryForm" label-width="80px" :inline="true" style="margin-top:15px">
                <el-form-item label="付款时间">
                  <el-date-picker
                    v-model="queryForm.payDate"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="mini">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="时间粒度">
                  <el-select v-model="queryForm.date" placeholder="请选择活动区域" size="mini">
                    <el-option label="15min" value="15"></el-option>
                    <el-option label="30min" value="30"></el-option>
                    <el-option label="1小时" value="60"></el-option>
                    <el-option label="2小时" value="120"></el-option>
                    <el-option label="3小时" value="180"></el-option>
                    <el-option label="6小时" value="240"></el-option>
                    <el-option label="12小时" value="720"></el-option>
                    <el-option label="一天" value="1440"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="商品">
                  <el-select v-model="queryForm.goods" placeholder="请选择活动区域" size="mini">
                    <el-option label="全部" value="all"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div style="float: right;margin-top: 17px">
              <el-button type="primary" @click="handlePrivate" size="mini">私密</el-button>
              <el-button type="primary" @click="handleAddDou" size="mini">投放Dou+</el-button>
            </div>
          </el-card>
          <el-card shadow="always">
            <el-table
              :data="tableData"
              style="width: 100%"
              height="400">
              <el-table-column
                fixed="left"
                label="编号"
                align="center"
                width="50"
                type="index">
              </el-table-column>
              <el-table-column
                fixed="left"
                label="日期"
                width="150"
                align="center">
                <template slot-scope="scope">
                  {{dateFormat(scope.row.createTime)}}
                </template>
              </el-table-column>
              <el-table-column
                prop="playNum"
                label="播放增量"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="diggNum"
                label="点赞增量"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="playTotal"
                label="播放总量"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="commTotal"
                label="评论总量"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="commNum"
                label="评论增量"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="diggTotal"
                label="点赞总量"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="city"
                label="有效佣金"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="address"
                label="退款率"
                width="300"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="预估消耗"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                label="净佣金ROI"
                width="120"
                align="center">
                <template slot-scope="scope" style="color: red">
                  {{scope.row.roi}}
                </template>
              </el-table-column>
              <el-table-column
                prop="zip"
                label="全部销售额"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="全部单数"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="退款单数"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="有效销售额"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="已付款佣金"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="有效单数"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="退款销售额"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="已结算佣金"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="已付款单数"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="全部佣金"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="退款佣金"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="已结算单数"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="销售额ROI"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="预估净利润"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="预估亏盈"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="有效佣金ROI"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="有效单笔价"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="万次播放有效出单"
                width="120"
                align="center">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="万次播放有效佣金"
                width="120"
                align="center">
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="图表分析" name="2">
          <el-card shadow="always" style="margin: 5px 0 5px 0">
            <el-row>
              <el-col :span="20">
                <div>
                  <el-form :model="queryChartForm" label-width="80px" :inline="true">
                    <el-form-item label="付款时间">
                      <el-date-picker
                        v-model="queryChartForm.payDate"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="mini">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="时间粒度">
                      <el-select v-model="queryChartForm.date" placeholder="请选择活动区域" size="mini">
                        <el-option label="15min" value="15"></el-option>
                        <el-option label="30min" value="30"></el-option>
                        <el-option label="1小时" value="60"></el-option>
                        <el-option label="2小时" value="120"></el-option>
                        <el-option label="3小时" value="180"></el-option>
                        <el-option label="6小时" value="240"></el-option>
                        <el-option label="12小时" value="720"></el-option>
                        <el-option label="一天" value="1440"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="商品">
                      <el-select v-model="queryChartForm.goods" placeholder="请选择活动区域" size="mini">
                        <el-option label="全部" value="all"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="展示数据">
                      <el-select
                        v-model="queryChartForm.display_data"
                        multiple
                        collapse-tags
                        size="mini"
                        @change="displayData"
                        placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
              <el-col :span="4">
                <div style="float: right;margin-top: 17px">
                  <el-button type="primary" @click="handlePrivate" size="mini">私密</el-button>
                  <el-button type="primary" @click="handleAddDou" size="mini">投放Dou+</el-button>
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-card shadow="always">
            <div id="myChart" style="width: 1200px;height:400px;"></div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="评论监控" name="3">
          <el-card shadow="always" style="margin: 5px 0 5px 0">
            <el-row>
              <el-col :span="20">
                <div>
                  <el-form :model="queryCommentForm" label-width="80px" :inline="true">
                    <el-form-item label="时间">
                      <el-select v-model="queryCommentForm.date" placeholder="请选择活动区域" size="mini">
                        <el-option label="全部" value="all"></el-option>
                        <el-option label="最近1小时" value="60"></el-option>
                        <el-option label="最近2小时" value="120"></el-option>
                        <el-option label="最近3小时" value="180"></el-option>
                        <el-option label="最近6小时" value="240"></el-option>
                        <el-option label="最近12小时" value="720"></el-option>
                        <el-option label="最近24小时" value="1440"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="置顶状态">
                      <el-select v-model="queryCommentForm.statue" placeholder="请选择活动区域" size="mini">
                        <el-option label="全部" value="15"></el-option>
                        <el-option label="未置顶" value="30"></el-option>
                        <el-option label="置顶" value="60"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="删除状态">
                      <el-select v-model="queryCommentForm.isDelete" placeholder="请选择活动区域" size="mini">
                        <el-option label="全部" value="all"></el-option>
                        <el-option label="已删除" value="1"></el-option>
                        <el-option label="未删除" value="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
              <el-col :span="4">
                <div style="float: right;margin-top: 17px">
                  评论抓取：
                  <el-switch
                    v-model="isGrabComment"
                    active-color="#13ce66"
                    inactive-color="#bdc3c7">
                  </el-switch>
                  <el-button type="primary" style="margin-left: 20px" @click="refreshList" size="mini"
                             v-if="isGrabComment">刷新列表
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-card shadow="always">
            <el-table
              :data="tableData"
              style="width: 100%"
              height="500"
              v-if="isGrabComment"
              border>
              <el-table-column
                label="序号"
                align="center"
                width="100"
                type="index">
              </el-table-column>
              <el-table-column
                prop="date"
                label="评论"
                width="300"
                align="center">
              </el-table-column>
              <el-table-column
                prop="name"
                label="评论人"
                width="200"
                align="center">
              </el-table-column>
              <el-table-column
                prop="data"
                label="评论时间"
                width="200"
                align="center">
              </el-table-column>
              <el-table-column
                prop="city"
                label="删除时间"
                width="200"
                align="center">
              </el-table-column>
              <el-table-column
                prop="address"
                label="删除耗时"
                width="250"
                align="center">
              </el-table-column>
              <el-table-column
                label="操作"
                width="130"
                align="center">
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  import {monitoryVideoDetailList} from "@/api/work/monitor/monitor";
  import ElCol from "element-ui/packages/col/src/col";
  import ElRow from "element-ui/packages/row/src/row";
  import BScroll from 'better-scroll';
  export default{
    components: {
      ElRow,
      ElCol
    },
    /* mounted() {
     setTimeout(() => {
     if (!this.$refs.wrapper) {
     return   //再加一次判断，防止dom没有加载出来而报错
     }
     this.scroll = new BScroll(this.$refs.wrapper, {})
     // better-scroll的初始化接收两个参数，第一个是dom元素，第二个是配置项对象，可以不传
     }, 20)
     },*/
    data(){
      return {
        isGrabComment: true,
        commNum: null,
        commTotal: null,
        diggNum: null,
        diggTotal: null,
        playNum: null,
        playTotal: null,
        span: 4,
        activeName: '1',
        currentPage: 0,
        total: 0,
        itemId: '',
        legend: [],
        queryForm: {},
        queryChartForm: {},
        queryCommentForm: {},
        tableData: [],
        options: [{
          value: '播放增量',
          label: '播放增量'
        }, {
          value: '点赞增量',
          label: '点赞增量'
        }, {
          value: '退款率',
          label: '退款率'
        }, {
          value: '预估消耗',
          label: '预估消耗'
        }, {
          value: '净佣金ROI',
          label: '净佣金ROI'
        }, {
          value: '评论增量',
          label: '评论增量'
        }, {
          value: '点赞总量',
          label: '点赞总量'
        }, {
          value: '有效销售额',
          label: '有效销售额'
        }, {
          value: '已结算佣金',
          label: '已结算佣金'
        }, {
          value: '已付款单数',
          label: '已付款单数'
        }, {
          value: '全部佣金',
          label: '全部佣金'
        }, {
          value: '退款佣金',
          label: '退款佣金'
        }, {
          value: '已结算单数',
          label: '已结算单数'
        }, {
          value: '销售额ROI',
          label: '销售额ROI'
        }, {
          value: '预估净利润',
          label: '预估净利润'
        }, {
          value: '预估亏盈',
          label: '预估亏盈'
        }, {
          value: '有效佣金ROI',
          label: '有效佣金ROI'
        }, {
          value: '万次播放有效出单',
          label: '万次播放有效出单'
        }, {
          value: '播放总量',
          label: '播放总量'
        }, {
          value: '评论总量',
          label: '评论总量'
        }, {
          value: '全部销售额',
          label: '全部销售额'
        }],
        dataArr: [],
        series: [],
        dateData: []
      }
    },
    mounted(){
      this.drawLine();
    },
    filters: {
      formatDate: function (value) {
        var unixTimestamp = new Date(value * 1000)
        return unixTimestamp.toLocaleString()
      }
    },
    created() {
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.wrapperBox, {
            scrollX: true,
            click: true,
            eventPassthrough: 'vertical'
          })
        }
      })
      this.getRouterData()
      this.monitoryVideoDetailList()
    },
    methods: {
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val
        this.monitoryVideoDetailList()
      },
      handleAddDou(){
        this.$message({
          message: '未开发',
          type: 'warning'
        });
      },
      handlePrivate(){
        this.$message({
          message: '未开发',
          type: 'warning'
        });
      },
      refreshList(){

      },
      /*视频监控的详情列表+积累*/
      monitoryVideoDetailList(){
        let data = {
          itemId: this.itemId
        }
        monitoryVideoDetailList(data).then(response => {
          const result = response.data
          this.tableData = result
          this.handleAccumulate();
        })
      },
      /*积累*/
      handleAccumulate(){
        let commNum = null
        let commTotal = null
        let diggNum = null
        let diggTotal = null
        let playNum = null
        let playTotal = null
        const data = this.tableData
        data.forEach((item, index) => {
          commNum += parseInt(item.commNum)
          commTotal += parseInt(item.commTotal)
          diggNum += parseInt(item.diggNum)
          diggTotal += parseInt(item.diggTotal)
          playNum += parseInt(item.playNum)
          playTotal += parseInt(item.playTotal)
        })
        this.commNum = commNum
        this.commTotal = commTotal
        this.diggNum = diggNum
        this.diggTotal = diggTotal
        this.playNum = playNum
        this.playTotal = playTotal
      },
      /*图表*/
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          /*/!* title: {
           text: '折线图堆叠'
           },
           tooltip: {
           trigger: 'axis'
           },
           legend: {
           data: this.dataArr
           },
           grid: {
           /!* left: '3%',
           right: '4%',
           bottom: '3%',
           containLabel: true*!/
           top: '20%',
           left: '3%',
           right: '4%',
           bottom: '3%',
           show: true,
           borderColor: '#012f4a',
           containLabel: true
           },
           toolbox: {
           feature: {
           saveAsImage: {}
           }
           },
           xAxis: {
           type: 'category',
           boundaryGap: false,
           data: this.dateData
           },
           yAxis: [{
           name: '数量',
           type: 'value'
           },
           {
           name: '金额',
           type: 'value'
           }],*!/
           series: this.series*/
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true,
            borderColor: '#012f4a',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },
          series: [
            {
              name: '邮件营销',
              type: 'line',
              smooth: true,
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '联盟广告',
              type: 'line',
              smooth: true,
              data: [220, 182, 191, 234, 290, 330, 310]
            }]
        });
      },
      /*获取列表数据*/
      getListData(){
        let data = {
          itemId: this.itemId
        }
        monitoryVideoDetailList(data).then(response => {
          const result = response.data
          this.listData = result
          console.log('lis1t', this.listData)
        })
      },
      /*图表*/
      displayData(val){
        /* let data = {
         itemId: this.itemId
         }
         monitoryVideoDetailList(data).then(response => {
         const result = response.data
         this.listData = result
         this.listData.forEach((item, index) => {
         this.dateData.push(item.createTime)
         this.data.push(item.createTime)
         })
         })
         console.log('data', this.dateData)*/
        this.dataArr = []
        this.series = []
        this.dataArr = val
        val.forEach((item, index) => {
          let obj = {
            name: item,
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210],
            smooth: true
          }
          this.series.push(obj)
        })
        this.drawLine();
      },

      getRouterData() {
        this.itemId = this.$route.query.id
        console.log(this.itemId)
      },
      dateFormat: function (time) {
        var date = new Date(time);
        var year = date.getFullYear();
        /* 在日期格式中，月份是从0开始的，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      },
      unique(arr) {
        if (!Array.isArray(arr)) {
          console.log('type error!')
          return
        }
        let res = [arr[0]]
        for (let i = 1; i < arr.length; i++) {
          let flag = true
          for (let j = 0; j < res.length; j++) {
            if (arr[i] === res[j]) {
              flag = false;
              break
            }
          }
          if (flag) {
            res.push(arr[i])
          }
        }
        return res
      }
    }
  }
</script>

<style>
  .col {
    display: flex;
    justify-content: center;
    align-items: center
  }

  .wrapper {
    overflow: hidden;
    width: 1350px;
    height: 45px;
  }

  .content {
    width: 3000px
  }
</style>
